{% extends 'base.html' %}   {# 将当前页面继承至base.html母版 #}
{% block content %}

<!-- 引入必要的脚本文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/js/bootbox.min.js"></script>

<!-- 初始化编辑器 -->
<script type="text/javascript">
    // 编辑器初始化配置
    const editorConfig = {
        initialFrameHeight: 400,
        autoHeightEnabled: true,
        enableCodeBlock: true,
        codeBlockClass: 'hljs',
        serverUrl: '/uedit',
    };
    
    // 等待DOM加载完成后初始化编辑器
    document.addEventListener('DOMContentLoaded', function() {
        window.ue = UE.getEditor('content', editorConfig);
    });
</script>

<!-- 中部区域布局 -->
<div class="container" style="margin-top: 20px; background-color: white; padding: 20px;">
    <div class="row form-group">
        <label for="headline" class="col-1">文章标题</label>
        <input type="text" class="col-11" id="headline" value="{{ result.headline }}" />
    </div>
    <div class="row">
        <script id="content" type="text/plain">
            {{ result.content | safe }}
        </script>
    </div>

    <!-- 类型、积分、提交修改 -->
    <div class="row form-group" style="margin-top: 20px; padding-top: 10px;">
        <!-- 类型 -->
        <label for="type" class="col-1">类型：</label>
        <select class="form-control col-2" id="main-type">
            {% for key, value in article_type.items() %}
                {% if key < 100 %}
                <option value="{{ key }}"
                        {% if result.type // 100 == key %} selected {% endif %}>
                    {{ value }}
                </option>
                {% endif %}
            {% endfor %}
        </select>

        <!-- 子类型 -->
        <select class="form-control col-2" id="sub-type">
            {% if result.type %}
                {% for key, value in article_type.items() %}
                    {% if key >= 100 and key // 100 == result.type // 100 %}
                    <option value="{{ key }}"
                            {% if result.type == key %} selected {% endif %}>
                        {{ value }}
                    </option>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </select>

        <!-- 积分 -->
        <label for="credit" class="col-1">积分：</label>
        <select class="form-control col-2" id="credit">
            <option value="0">免费</option>
            <option value="1">1分</option>
            <option value="2">2分</option>
            <option value="5">5分</option>
            <option value="10">10分</option>
            <option value="20">20分</option>
            <option value="50">50分</option>
        </select>

        <!-- 提交修改按钮 -->
        <button class="form-control btn-primary col-2" onclick="doEdit()">提交修改</button>
    </div>
</div>

<script>
/**
 * 处理文章编辑提交
 */
function doEdit() {
    // 获取并验证表单数据
    const headline = $.trim($("#headline").val());
    const contentPlain = UE.getEditor("content").getContentTxt();
    
    // 表单验证
    if (!validateForm(headline, contentPlain)) {
        return false;
    }
    
    // 确保子类型选项存在
    ensureSubTypeOptions(headline, contentPlain);
}

/**
 * 表单验证
 */
function validateForm(headline, contentPlain) {
    if (headline.length < 5) {
        showError("标题不能少于5个字");
        return false;
    } 
    
    if (contentPlain.length < 100) {
        showError("内容不能低于100个字");
        return false;
    }
    
    return true;
}

/**
 * 显示错误提示
 */
function showError(message) {
    bootbox.alert({ 
        title: "错误提示", 
        message: message 
    });
}

/**
 * 确保子类型选项存在
 */
function ensureSubTypeOptions(headline, contentPlain) {
    const mainTypeVal = $("#main-type").val();
    const subTypeVal = $("#sub-type").val();
    
    console.log("类型检查 - 主类型:", mainTypeVal, "子类型:", subTypeVal);
    
    // 如果子类型为空，则重新加载子类型选项
    if (!subTypeVal || subTypeVal === "") {
        console.log("子类型为空，重新加载子类型选项");
        $("#main-type").trigger("change");
        
        // 等待子类型选项加载完成
        setTimeout(() => submitEditForm(headline, contentPlain), 100);
        return;
    }
    
    submitEditForm(headline, contentPlain);
}

/**
 * 提交编辑表单
 */
function submitEditForm(headline, contentPlain) {
    // 准备表单数据
    const formData = prepareFormData(headline);
    
    // 发送AJAX请求
    $.ajax({
        url: '/article/edit',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: handleEditSuccess,
        error: handleEditError
    });
}

/**
 * 准备表单数据
 */
function prepareFormData(headline) {
    const formData = new FormData();
    formData.append("headline", headline);
    formData.append("content", UE.getEditor("content").getContent());
    
    // 获取并处理类型值
    const mainTypeVal = $("#main-type").val();
    let subTypeVal = $("#sub-type").val();
    
    // 确保子类型值有效
    if (!subTypeVal || subTypeVal === "") {
        const defaultSubType = parseInt(mainTypeVal) * 100 + 1;
        console.log("使用默认子类型值:", defaultSubType);
        subTypeVal = defaultSubType.toString();
    }
    
    formData.append("type", mainTypeVal);
    formData.append("subtype", subTypeVal);
    formData.append("credit", $("#credit").val());
    formData.append("drafted", "0");
    formData.append("checked", "0");
    formData.append("articleid", "{{ result.articleid }}");
    
    console.log("提交数据 - 主类型:", mainTypeVal, "子类型:", subTypeVal);
    return formData;
}

/**
 * 处理编辑成功响应
 */
function handleEditSuccess(data) {
    console.log("Response data:", data);
    
    if (data === "login") {
        showMessage("错误提示", "请先登录后再进行操作.", function() {
            location.href = '/login';
        });
    } else if (data === "perm-denied") {
        showError("您没有权限操作此文章.");
    } else if (data === "empty") {
        showError("文章修改失败，请稍后重试.");
    } else if (data.match(/^\d+$/)) {
        showMessage("信息提示", "恭喜你，文章修改成功.", function() {
            location.href = '/article/' + data;
        });
    } else {
        showError("未知错误，请联系管理员.");
    }
}

/**
 * 处理编辑错误响应
 */
function handleEditError(xhr, status, error) {
    console.error("Error details:", {
        status: status,
        error: error,
        response: xhr.responseText
    });
    
    showError("提交失败，请检查网络连接或联系管理员. 错误: " + error);
}

/**
 * 显示消息对话框
 */
function showMessage(title, message, callback) {
    bootbox.alert({ 
        title: title, 
        message: message,
        callback: callback
    });
}
</script>

<script>
    /**
     * 类型选择处理
     * 负责处理主类型和子类型的联动关系
     */
    document.addEventListener('DOMContentLoaded', function() {
        // 获取主类型和子类型下拉框
        const mainTypeSelect = document.getElementById('main-type');
        const subTypeSelect = document.getElementById('sub-type');
        // 当前文章的子类型（确保安全解析）
        const originalSubType = "{{ result.type }}" ? parseInt("{{ result.type }}") : 0;

        // 子类型数据 (从后端传递)
        const subTypesData = JSON.parse('{{ subTypesData | tojson | safe }}');

        /**
         * 更新子类型选项
         */
        function updateSubTypes() {
            const selectedMainType = parseInt(mainTypeSelect.value);
            const subTypes = subTypesData[selectedMainType];

            // 清空现有选项
            subTypeSelect.innerHTML = '';

            // 添加子类型选项
            if (subTypes) {
                Object.entries(subTypes).forEach(([subIdStr, subName]) => {
                    const subId = parseInt(subIdStr);
                    const option = new Option(subName, subId);
                    if (subId === originalSubType) {
                        option.selected = true;
                    }
                    subTypeSelect.add(option);
                });
            }
            
            // 如果没有子类型选项，添加默认选项
            if (subTypeSelect.options.length === 0 && selectedMainType) {
                addDefaultSubType(selectedMainType);
            }
        }

        /**
         * 添加默认子类型选项
         */
        function addDefaultSubType(mainType) {
            // 创建默认子类型选项（主类型*100 + 1）
            const defaultSubType = mainType * 100 + 1;
            
            // 尝试获取子类型名称
            let subTypeName = "默认子类型";
            if (subTypesData[mainType] && subTypesData[mainType][defaultSubType]) {
                subTypeName = subTypesData[mainType][defaultSubType];
            }
            
            const option = new Option(subTypeName, defaultSubType);
            subTypeSelect.add(option);
        }

        // 主类型变化时更新子类型
        mainTypeSelect.addEventListener('change', updateSubTypes);

        // 初始化时触发一次更新
        updateSubTypes();
    });
</script>
{% endblock %}
